{extend name='extra@admin/content'}
{block name="button"}
<div class="nowrap pull-right" style="margin-top:10px">
    <button data-open='/admin.html#/admin/family/index.html' class='layui-btn layui-btn-small'><i
            class='fa fa-mail-reply-all'></i> 返回家族
    </button>
    <button data-modal='{:url("$classuri/add")}?fid={$fid}&branch_id={$id}' data-title="添加成员" class='layui-btn layui-btn-small'>
        <i class='fa fa-plus'></i> 添加成员
    </button>
    <button data-open='{:url("$classuri/index")}?fid={$fid}' class='layui-btn layui-btn-small'><i
            class='fa fa-mail-reply-all'></i> 返回分支
    </button>
</div>
{/block}
{block name="content"}
<div id="mainStructure" style="min-height: 800px;width: 100%"></div>
<script src="/static/admin/echarts/chart/echarts.js"></script>
<script type="text/javascript">
    //Echarts CDN路径
    require.config({
        paths: {
            echarts: 'https://cdn.jsdelivr.net/npm/echarts@2.2.8/build'
        }
    });
    var bid = {$id};
    var fid = {$fid};
    require(['echarts','echarts/chart/tree'],function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('mainStructure'));
            myChart.showLoading();
            $.post('{:url("$classuri/createStruct")}',{branch_id:bid,fid:fid},function (res) {
                console.log(res);
                var option = {
                    title : {
                        text: '家族分支图谱'
                    },
                    tooltip : {
                        show: true,
                        trigger: 'item',
                        formatter: function (v) {
                            var phone = v.contact == undefined?"无":v.contact
                            return "字辈:["+v.value+"]"+'<br/>'+"手机:"+phone;
                        },
                        textStyle: {
                            fontSize: 18,
                            fontFamily:'Microsoft YaHei',
                        }
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    series : [
                        {
                            name:'家族树',
                            type:'tree',
                            layout:'orthogonal',
                            orient: 'vertical',  // vertical horizontal
                            rootLocation: {x: '50%', y: '15%'}, // 根节点位置  {x: 'center',y: 10}
                            nodePadding: 20,
                            layerPadding:40,
                            symbol: 'rectangle',
                            borderColor:'black',
                            roam: true,
                            itemStyle: {
                                normal: {
                                    color: '#fff',//节点背景色
                                    borderWidth: 2,
                                    borderColor: 'black',
                                    label: {
                                        show: true,
                                        position: 'inside',
                                        textStyle: {
                                            color: 'black',
                                            fontSize: 15,
                                            //fontWeight:  'bolder'
                                        }
                                    },
                                    lineStyle: {
                                        color: '#000',
                                        width: 1,
                                        type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
                                    }
                                },
                                emphasis: {
                                    label: {
                                        show: false
                                    }
                                }
                            },
                            data:[res]
                        }
                    ]
                };
                // 为echarts对象加载数据
                myChart.hideLoading();
                myChart.setOption(option);
                myChart.on('click',function (data) {
                    var param = data.data;
                    var url = "/admin/branch/add.html?id="+param.id+"&fid="+fid+"&branch_id="+bid;
                    $.form.modal(url,'open_type=modal','修改成员');
                })
            })
        });
</script>
{/block}